<template>
  <dl>
    <dt>技术信息</dt>
    <dd>
      <ul>
        <li>
          <b>界面地址(政务外网):</b>
          <span>
            {{ data.apiUrl }} <a href="javascript:;" @click="copyUrl(data.apiUrl)">复制</a>
          </span>
        </li>
        <li>
          <b>界面地址(公网):</b>
          <span> {{ data.apiUrlPublic }}<a href="javascript:;" @click="copyUrl(data.apiUrlPublic)">复制</a> </span>
        </li>
      </ul>
    </dd>
  </dl>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: "TechnologyInfo",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, { emit }) {
    // 复制功能
    const copyUrl = (url) => {
      let oInput = document.createElement('input');
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      console.log(oInput.value)
      document.execCommand("Copy"); // 执行浏览器复制命令
      ElMessage.success('复制成功')
      oInput.remove()
    }
    return {
      copyUrl
    };
  },
});
</script>

<style lang="scss" scoped>
dl {
  margin-top: 20px;
  dt {
    border-left: 4px solid #2E69EB;
    height: 16px;
    line-height: 18px;
    padding-left:10px;
  }
  dd {
    ul {
      border: 1px solid #DBDEE6;
      margin: 30px 0;
      li {
        b {
          display: inline-block;
          padding: 18px 40px;
          padding-right: 0;
          width: 200px;
          background: #F6F9FF;
          font-weight: 600;
          color: #3C475D;
          height: 100%;
        }
        & + li {
          border-top: 1px solid #DBDEE6;
        }
        span {
          padding-left: 40px;
          vertical-align: middle;
          color: #3C475D;
          line-height: 2em;
          display: inline-block;
          a {
            color: #2E69EB;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
